<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>39.开放更多API实现灵活定制</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
    }

    main {
      width: 400px;
      flex-direction: column;
      position: relative;
      margin-right: 20px;
    }

    main nav {
      display: flex;
      height: 50px;
      align-items: center;
    }

    main nav a,
    main nav span,
    main nav a {
      background: #95a5a6;
      margin-right: px;
      padding: 10px 20px;
      border: solid 1px #333;
      color: #fff;
      text-decoration: none;
    }

    main nav a:first-of-type {
      background: #e67e22;
    }

    section {
      height: 200px;
      width: 100%;
      background: #f1c40f;
      position: absolute;
      font-size: 5em;
      display: none;
    }

    .hd-tab section:first-of-type {
      display: block;
    }

    section:nth-child(even) {
      background: #27ae60;
    }
  </style>
  </style>
</head>

<body>
  <main class="tab1">
    <nav>
      <a href="javascript:;"> 后盾人</a>
      <a href="javascript:;">hdcms</a>
    </nav>
    <section>1</section>
    <section>2</section>
  </main>
  <main class="tab2">
    <nav>
      <span href="javascript:;"> 后盾人</span>
      <span href="javascript:;">hdcms</span>
    </nav>
    <section>1</section>
    <section>2</section>
  </main>
  <script>
    function extend (sub, sup) {
      sub.prototype = Object.create(sup.prototype);
      sub.prototype.constructor = sub;

    }
    function Animation () { }
    Animation.prototype.hide = function () {
      this.style.display = 'none';
    }
    Animation.prototype.show = function () {
      this.style.display = 'block';
    }
    Animation.prototype.background = function (color) {
      this.style.backgroundColor = color;
    }


    // 指定把哪个容器变成选项卡,tab1 和tab 2是独立的，不能写到构造函数里面
    // 增加灵活性传递 ，修改传参的形式
    function Tab (args) {
      // 合并属性，保证默认参数和callback 有值
      args = Object.assign({ el: null, link: 'a', section: 'section', callback: null }, args);
      this.tab = document.querySelector(args['el']);
      this.links = this.tab.querySelectorAll(args['link']);
      this.sections = this.tab.querySelectorAll(args['section']);
      this.callback = args['callback'];
    }
    extend(Tab, Animation);
    // 共用的方法写到原型中
    Tab.prototype.run = function () {
      this.bindEvent();
      this.reset();
      this.action(0);
    }
    //为了避免连续嵌套，点击后的操作方法也放入原型中
    Tab.prototype.bindEvent = function () {
      this.links.forEach((el, i) => {
        // 点击事件
        el.addEventListener('click', () => {
          this.reset();
          this.action(i);

        });
      })
    }
    //为了避免连续嵌套，点击后的操作方法也放入原型中
    Tab.prototype.action = function (i) {
      this.background.call(this.links[i], "#e67e22");
      this.show.call(this.sections[i]);
      this.callback();

    }
    // 重制 style
    Tab.prototype.reset = function () {
      this.links.forEach((el, i) => {
        this.background.call(el, "#95a5a6");
        this.hide.call(this.sections[i]);
      })
    }
    //new Tab('.tab1').run();
    new Tab({
      el: '.tab1',
      callback () {
        console.log('callback1');
      }
    }).run();
    new Tab({
      el: '.tab2', link: 'span', section: 'section',
      callback () {
        console.log('callback2');
      }
    }).run();


  </script>
</body>

</html>